<!-- statusBar -->
<template>
  <div class="status-bar">
    <div class="status-bar-wrapper">
      <!-- 终端 -->
      <div class="status-bar-item-wrapper">
        <terminal></terminal>
      </div>
      <!-- 远程服务器 -->
      <div class="status-bar-item-wrapper">
        <remoteServer></remoteServer>
      </div>
      <!-- 内存 -->
      <div class="status-bar-item-wrapper">
        <memoryStatus></memoryStatus>
      </div>
      <!-- 性能-fps -->
      <div
        class="status-bar-item-wrapper"
        @mouseover="itemClick('performanceFps')"
        @mouseleave="itemMouseLeave"
        :class="current == 'performanceFps' ? 'active' : ''"
      >
        <performanceFps></performanceFps>
        <popup
          v-if="current == 'performanceFps' ? true : false"
          :params="performanceFpsInfo"
          :popupParams="{ width: '100px' }"
        ></popup>
      </div>
      <!-- 网络状态 -->
      <div
        class="status-bar-item-wrapper"
        @mouseover="itemClick('network')"
        @mouseleave="itemMouseLeave"
        :class="current == 'network' ? 'active' : ''"
      >
        <networkStatus />
        <popup
          v-if="current == 'network' ? true : false"
          :params="networkInfo"
          :popupParams="{ width: '150px' }"
        ></popup>
      </div>
      <!-- 显示效果 -->
      <div
        class="status-bar-item-wrapper"
        @mouseover="itemClick('display')"
        @mouseleave="itemMouseLeave"
        :class="current == 'display' ? 'active' : ''"
      >
        <display></display>
        <popup
          v-if="current == 'display' ? true : false"
          :params="displayInfo"
          :popupParams="{ width: '170px' }"
        ></popup>
      </div>

      <!-- 摄像头 -->
      <div class="status-bar-item-wrapper">
        <videoStatus></videoStatus>
      </div>
      <!-- 麦克风 -->
      <div class="status-bar-item-wrapper">
        <audioStatus></audioStatus>
      </div>
      <!-- gpu -->
      <div class="status-bar-item-wrapper">
        <gpuStatus></gpuStatus>
      </div>
      <!-- 浏览器 -->
      <div
        class="status-bar-item-wrapper"
        @mouseover="itemClick('browser')"
        @mouseleave="itemMouseLeave"
        :class="current == 'browser' ? 'active' : ''"
      >
        <browser></browser>
        <popup
          v-if="current == 'browser' ? true : false"
          :params="browser"
          :popupParams="{ width: '150px' }"
        ></popup>
      </div>
      <!-- 语言 -->
      <div class="status-bar-item-wrapper">
        <language></language>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { envServer as env } from 'anov-core'
import networkStatus from './networkStatus'
import browser from './browser'
import language from './language'
import display from './display'
import performanceFps from './performanceFps'
import popup from './popup'
import videoStatus from './video'
import audioStatus from './audio'
import memoryStatus from './memory'
import gpuStatus from './gpu'
import remoteServer from './remoteServer'
import terminal from './terminal'

export default {
  name: 'statusBar',
  components: {
    networkStatus,
    browser,
    language,
    display,
    performanceFps,
    popup,
    videoStatus,
    audioStatus,
    memoryStatus,
    gpuStatus,
    remoteServer,
    terminal
  },
  data() {
    return {
      dataList: [],
      statusMenuFlag: false,
      networkInfo: [{ name: '网速', value: '' }],
      performanceFpsInfo: [{ name: 'FPS', value: 0 }],
      browser: [{ name: '版本', value: 0 }],
      displayInfo: [
        { name: '分辨率', value: '' },
        { name: '设计尺寸', value: '' },
        { name: '当前宽高', value: '' },
        { name: '显示效果', value: '' }
      ],
      current: '',

      statusBar: ''
    }
  },
  computed: {
    ...env.mapState([
      'resolution',
      'browserInfo',
      'resolution',
      'scaleRatio',
      'wrapperSize',
      'designSize',
      'localNetwork',
      'fps',
      'displayEffect'
    ]),
    ...mapState('cmlpanel', ['isPanelOpen'])
  },
  watch: {
    isPanelOpen: {
      handler: function () {
        this.init()
      }
    },
    localNetwork: {
      handler: function (v) {
        this.getNetworkInfo()
      }
    },
    fps: {
      handler: function () {
        this.getPerformanceFpsInfo()
      }
    },
    scaleRatio: {
      handler: function () {
        this.getDisplayInfo()
      }
    }
  },
  methods: {
    init() {
      this.getBrowserInfo()
    },
    itemClick(str) {
      this.current = str
      // this.statusBar.updateItem('language',{value: '测试'})
    },
    itemMouseLeave() {
      this.current = ''
    },
    getBrowserInfo() {
      this.browser[0].value = this.browserInfo.version
    },
    getDisplayInfo() {
      this.displayInfo[0].value = this.resolution.w + '*' + this.resolution.h
      this.displayInfo[1].value = this.designSize.w + '*' + this.designSize.h
      this.displayInfo[2].value = this.wrapperSize.w + '*' + this.wrapperSize.h

      this.displayInfo[3].value = this.displayEffect + '%'
    },
    getNetworkInfo() {
      this.networkInfo[0].value =
        this.localNetwork.speed +
        ' ' +
        (this.localNetwork.unit ? this.localNetwork.unit : '')
    },
    getPerformanceFpsInfo() {
      this.performanceFpsInfo[0].value = this.fps
    }
  },
  created() {},
  mounted() {
    // console.log(11111)
    //   this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';
@import '../../../../../css/panel-var.scss';
.status-bar {
  position: relative;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #293135;
  border-top: none;
  background: #111215;
  .status-bar-wrapper {
    height: 32px;
    @include flex(row, flex-end);
    .status-bar-item-wrapper {
      position: relative;
      padding: 0 10px;

      &.active {
        background: rgba(0, 0, 0, 0.8);
        cursor: pointer;
      }
    }
  }
}
</style>
